<template>
 <div class="shuffling">
   <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item,i) in imgs" key="i">
                <img :src="item" alt="">
            </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination" slot="pagination"></div>
    </div>
      
 </div>
</template>

<script>
import 'swiper/swiper-bundle.css'
import Swiper, {Pagination, Mousewheel, Navigation} from "swiper"
Swiper.use([Navigation, Pagination, Mousewheel]);
 export default {
  name: 'shuffling' ,
 data () {
 return {
   imgs:[
      require('@/assets/image/swiper-image/swiper1.jpg'),
      require('@/assets/image/swiper-image/swiper2.jpg'),
      require('@/assets/image/swiper-image/swiper3.jpg'),
      require('@/assets/image/swiper-image/swiper4.jpg'),
   ],
   
  }
 },
 
 mounted(){
   var swiper = new Swiper('.swiper-container', {
        pagination: {
            el: '.swiper-pagination',
            clickable: true
        },
        autoplay:true,
        autoplay : {
            delay : 2500, //自动切换的时间间隔，单位ms
            disableOnInteraction : false //用户操作swiper之后，是否禁止autoplay
        },
        loop: true,
        direction: 'vertical',
        slidesPerView: 1,
        paginationClickable: true,
        spaceBetween: 30,
        mousewheelControl: true
    });
 }
}

</script>
<style scope lang="less">
.swiper-container {
    width: 1300px;
    height: 500px;
    margin-left: auto;
    margin-right: auto;
    img{
        width: 100%;
        height: 80%;
    }
}
</style>